<template>
    <view style="background-color:#f7f6fc;width: 750upx;overflow-x: hidden;">
        <view class="port" style="width: 750upx;">
            <view style="display: flex;flex-direction: column;">
                <text class="text">{{data.goal.subtitle}}</text>
                <text class="texts">{{data.goal.message}}</text>
            </view>

            <view class="image" @tap="previewimage(data.goal.picture)">
                <image :lazy-load="true" mode="aspectFill" :src="item" v-for="(item,index) in data.goal.picture" :key="index" style="height: 180upx;margin-right:15upx;width:180upx ; border-radius: 10upx;">
                </image>
            </view>
            <view class="bottom">
                <view class="left">
                    <text>{{data.goal.time}} (&nbsp;签到&nbsp;第{{data.goal.signednum}}天) </text>
                    <text> 坚持 {{data.goal.signednum}}/{{data.goal.signnum}}天</text>
                </view>
                <view class="right">
                    <!--  <button class="button"  plain="true"    ><text style="color:#FBBD08;font-size:30upx;"></text> </button> -->
                    <view class="padding-xs">
                        <view class='cu-tag round line-orange'>积分{{data.goal.integral}}</view>
                    </view>
                </view>
            </view>

        </view>

        <view class="" style="margin-top: 20upx;background-color:#fefefe ;width: 750upx;">
            <view class="title">
                <text class="sum">共{{ data.goal.commentNum}}评论</text>
            </view>
            <view class="content" v-for="(items,index) in comments" :key="items.id">
                <view class="contents solid-bottom" @longtap="huifu(index)">
                    <view class="">
                        <image :src="items.postHeadPortrait" class="cu-avatar round" style="margin-top: 20upx;"></image>
                    </view>

                    <view class="zhuti">
                        <text style="color:#999999 ;font-size: 30upx;margin-left: 30upx;">{{items.postUsername}}</text>
                        <view style="color: #333333;font-size: 35upx;margin-left: 30upx;">{{items.message}} </view>
                        <text style="color:#999999;font-size: 25upx;margin-left: 20upx;">{{items.time}} </text>



                        <view v-if="items.biaozhi === 1">
                            <view class="huifu" v-for="itemg in items.list">

                                <view class="">
                                    <view class="title2">
                                        <image :src="itemg.postHeadPortrait" mode="" class="cu-avatar round"></image>
                                        <text style="color:#999999;font-size: 30upx;margin-right: 30upx;margin-left: 20upx;">{{itemg.postUsername}}</text>
                                        <view class='cu-tag round' style="color: #007AFF;" v-show="itemg.biaoqian">作者</view>
                                    </view>
                                    <view style="color: #333333;font-size: 35upx;margin-left: 100upx
                               ;">{{itemg.message}}
                                        <text style="color:#999999;font-size: 25upx;margin-left: 20upx;">{{itemg.time}}</text></view>
                                </view>

                            </view>
                        </view>


                        <view v-if="items.biaozhi === 0">

                            <view class="" v-if=" items.zhankai === 0">
                                <view class="huifu">
                                    <view class="">
                                        <view class="title2">
                                            <image :src="items.list[0].postHeadPortrait" mode="" class="cu-avatar round"></image>
                                            <text style="color:#999999;font-size: 30upx;margin-right: 30upx;margin-left: 20upx;">{{items.list[0].postUsername}}</text>
                                            <view class='cu-tag round' style="color: #007AFF;" v-show="items.list[0].biaoqian">作者</view>
                                        </view>
                                        <view style="color: #333333;font-size: 35upx;margin-left: 100upx
                                  ;">{{items.list[0].message}}
                                            <text style="color:#999999;font-size: 25upx;margin-left: 20upx;">{{items.list[0].time}}
                                            </text></view>

                                        <view class="yincang">
                                            <text @click="zhangkai(index)">展开{{items.changdu}}条回复</text>
                                        </view>
                                        <view style="margin-bottom: 30upx;"></view>

                                    </view>

                                </view>
                            </view>

                            <view class="" v-else>

                                <view class="huifu" v-for="itemg in items.list">

                                    <view class="">
                                        <view class="title2">
                                            <image :src="itemg.postHeadPortrait" mode="" class="cu-avatar round"></image>
                                            <text style="color:#999999;font-size: 30upx;margin-right: 30upx;margin-left: 20upx;">{{itemg.postUsername}}</text>
                                            <view class='cu-tag round' style="color: #007AFF;" v-show="itemg.biaoqian">作者</view>
                                        </view>
                                        <view style="color: #333333;font-size: 35upx;margin-left: 100upx
                                       ;">{{itemg.message}}
                                            <text style="color:#999999;font-size: 25upx;margin-left: 20upx;">{{itemg.time}}</text></view>
                                    </view>

                                </view>
                                <view class="yincang">
                                    <text @click="shouqi(index)">收起{{items.changdu}}条回复</text>
                                </view>
                            </view>


                        </view>

                    </view>
                    <view class="images" @tap.stop="dianzan(index)">
                        <image :src="items.dianzantupian" mode="" class="aixin"></image>
                        <text class="dianzanshu" :class="{dianzanlo:items.jude}">{{items.thumbs}}</text>
                    </view>
                </view>
                <!-- <view class="contents solid-bottom">
                   <view class="" style="width: 65upx;">
                        <image src="../../static/goal/senver.jpg" class="cu-avatar round" style="height: 100upx;"></image>
                   </view>
                  
                   <view class="zhuti">
                        <text style="color:#999999 ;font-size: 30upx;margin-left: 30upx;">张叔叔</text>
                        <view style="color: #333333;font-size: 35upx;margin-left: 30upx;">佩服佩服 <text style="color:#999999;font-size: 25upx;margin-left: 20upx;">今天 &nbsp;14:30 </text></view>
                        <view style="margin-bottom: 30upx;"></view>
                    </view>
                    <view class="images">
                        <image src="../../static/goal/eight.jpg" mode="" class="aixin"></image>
                        <text class="dianzanshu">32</text>
                    </view>
                    <view  style="margin-bottom: 30upx;"></view>
               </view> -->
            </view>
            <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>

        </view>
       <view style="margin-top:120upx ;width: 750upx;background-color: #ffffff;"></view>


        <view class="mui-bar mui-bar-tab dibu">
            <view class="cu-bar bg-white" style="width: 550upx;" @tap="huifulo">
                <view class="search-form round">
                    <input type="text" placeholder="说点什么" confirm-type="send" @input="searchIcon" placeholder-class="logos"
                        disabled="true"></input>
                </view>
            </view>
            <view style="width: 100upx;">
                <image :src="dianzangg" mode="aspectFit" style="height: 70upx;width: 70upx;margin-left;margin-top: 12.5upx;"
                    @tap.stop="change"></image>
            </view>
            <view style="width: 100upx;">
                <image src="../../static/goal/eleven.jpg" mode="aspectFit" style="height: 70upx;width: 70upx;margin-left;margin-top: 12.5upx;"></image>
            </view>

        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                data: {

                },
                comments: [],
                loadMoreText: "加载中...",
                showLoadMore: false,
                max: 0,
                id: "",
                pageNum: 1,
                dianzangg: "../../static/index/aixin.png",
                jude: 0,
                iD:"",
                judge:0
            }
        },
        methods: {

            //查看图片
            previewimage(src) {

                uni.previewImage({
                    urls: src,
                    indicator: "default",
                    loop: true,
                    success() {
                        console.log("图片打开成功")
                    }
                });
            },

            //回复页面
            huifulo() {
                let id = this.iD
                let name = this.data.goal.postUsername

                uni.navigateTo({
                    url: "../huifu/huifu" + "?id=" + id + "&name=" + name + "&type=0" + "&commenttype=0"
                });
            },
            //回复评论，跳转评论页面
            huifu(index) {

                console.log(this.comments[index].message)

                var message = this.comments[index].message;
                var name = this.comments[index].postUsername;
                var id = this.comments[index].iD;


                plus.nativeUI.actionSheet({
                        title: "操作",
                        cancel: "取消",
                        buttons: [{
                            title: "回复评论"
                        }, {
                            title: "复制评论内容"
                        }]
                    },
                    function(e) {



                        if (e.index === 2) {

                            uni.showToast({
                                title: "内容复制成功",
                                icon: "none"
                            })



                            uni.setClipboardData({
                                data: message,
                                success: function() {
                                    console.log('success');
                                }
                            })

                        }
                        if (e.index === 1) {
                             //跳转评论页面
                            uni.navigateTo({
                                url: "../huifu/huifu" + "?id=" + id + "&name=" + name + "&type=0" +
                                    "&commenttype=1"
                            });

                        }
                    }


                );




            },

//获取评论数据
            getData(id, pageNum, c) {

                console.log(pageNum)

                
           this.$api.test({
              url: "setgoals/GetMyplanComment",
              data: {
                  id: id,
                  pageNum: pageNum,
                  pageLimit: 4
              }
           }).then((res) =>{
               if(res.data.status == 500){
                    uni.showToast({
                       title: '数据获取失败',
                       duration: 2000,
                       icon:"none",
                       position:"center"
                       
                   });
                   return;
               }
                                       if (c.comments.length == 0) {
               
                                           console.log(res.data)
               
                                           c.comments = res.data
               
                                           for (let i = 0; i < res.data.length; i++) {
               
               
               
                                               c.comments[i].dianzantupian = "../../static/index/aixin.png";
               
                                               c.comments[i].jude = 0;
               
                                               c.comments[i].changdu = res.data[i].list.length - 1;
                                               if (res.data[i].list.length > 1) {
                                                   c.comments[i].biaozhi = 0;
                                                   c.comments[i].zhankai = 0;
               
                                               } else {
                                                   c.comments[i].biaozhi = 1;
                                               }
               
                                               if (c.comments[i].list.length !== 0) {
               
                                                   for (var y = 0; y < c.comments[i].list.length; y++) {
               
                                                       console.log(c.comments[i].list[y].postUsername);
               
                                                       if (c.comments[i].list[y].postUsername === c.data.goal.postUsername) {
               
                                                           c.comments[i].list[y].biaoqian = true;
                                                       }
                                                   }
                                               }
                                           }
               
               
                                       } else {
               
                                           var length = c.comments.length
                                           c.comments = c.comments.concat(res.data);
                                           console.log(c.comments.length);
               
                                           console.log(res.data)
               
                                           for (let i = length; i < c.comments.length; i++) {
               
                                               c.comments[i].dianzantupian = "../../static/index/aixin.png";
               
                                               c.comments[i].jude = 0;
               
                                               c.comments[i].changdu = c.comments[i].list.length - 1;
                                               if (c.comments[i].list.length > 1) {
                                                   c.comments[i].biaozhi = 0;
                                                   c.comments[i].zhankai = 0;
               
                                               } else {
                                                   c.comments[i].biaozhi = 1;
                                               }
               
                                               if (c.comments[i].list.length !== 0) {
               
                                                   for (var y = 0; y < c.comments[i].list.length; y++) {
               
                                                       console.log(c.comments[i].list[y].postUsername);
               
                                                       if (c.comments[i].list[y].postUsername === c.data.goal.postUsername) {
               
                                                           c.comments[i].list[y].biaoqian = true;
                                                       }
                                                   }
                                               }
                                           }
               
                                       }
               
                                   })


            },

            setDate() {

                this.max += 4;
                this.pageNum = this.pageNum + 1;
                this.getData(this.iD, this.pageNum, this);
            },
            
            //把子评论展开
            zhangkai(i) {
                console.log(i)
                console.log(this.comments[i].zhankai)
                var x = this.comments[i];
                x.zhankai = 1;

                Vue.set(this.comments, i, x)

                console.log("120")

            },
            
            //把子评论收起来
            shouqi(i) {
                console.log(i)
                console.log(this.comments[i].zhankai)
                var x = this.comments[i];
                x.zhankai = 0;

                Vue.set(this.comments, i, x)

                console.log("120")


            },
            
            // 评论的点赞
            dianzan(index) {

                const c = this;
                var id = this.comments[index].iD
                var jude = this.comments[index].jude

                if (jude === 0) {

                    this.dianzans(id, jude, function(data) {

                        var x = c.comments[index];
                        x.dianzantupian = "../../static/index/dizan.png"
                        x.jude = 1;
                        x.thumbs = data.thumb;
                        c.comments.splice(index, 1, x);

                    })

                } else {
                    this.dianzans(id, jude, function(data) {

                        var x = c.comments[index];
                        x.dianzantupian = "../../static/index/aixin.png"
                        x.jude = 0;
                        x.thumbs = data.thumb;
                        c.comments.splice(index, 1, x);

                    })
                }


            },
            
            
            dianzans(id, jude, diaoyong) {

               
                
               this.$api.test({
url: "setgoals/SetMyplanCommentThumb",
                    data: {
                        id: id,
                        jude: jude
                    }
               }).then((res) =>{
                    diaoyong(res.data);
               }) 
                
                
            },
            
            //页面的点赞
            change() {

                var c = this;
                console.log(c.jude)

                var jude = this.jude
                if (jude === 0) {

                    

this.$api.test({
       url: 'setgoals/SetThumb',
       data: {
           id: c.id,
           type: "goal",
           jude: jude
       }
    }).then((res) =>{
        console.log(res.data)
        c.dianzangg = "../../static/index/dizan.png";
        c.jude = 1;
        
        uni.showToast({
            title: "点赞成功",
            icon: "none"
        })
    })

                } else {

   
this.$api.test({
       url: "setgoals/SetThumb",
       data: {
           id: c.id,
           type: "goal  ",
           jude: jude
       }
    }).then((res) =>{
        console.log(res.data)
        c.dianzangg = "../../static/index/aixin.png";
        c.jude = 0;
        
        uni.showToast({
            title: "点赞已取消",
            icon: "none"
        })
    })

                }

            }
        },
        
        // 载入页面的id
        onLoad(option) {
            console.log(option);
            if(option.id != undefined){
                 this.id = option.id
                 this.judge = 0 ;
            }
            
            if(option.briefId != undefined){
                this.id = option.briefId
                this.judge = 1;
            }
           
            
        },
        // 评论后退出，重新获取数据
        onShow() {

            var c = this;
            console.log(c.id)
            
      
            
            this.$api.test({
               url: "setgoals/GetDetailed",
               data: {
                   type: "goal",
                   id: c.id
               }
            }).then((res) =>{
              console.log(res.data)
              
              c.data = res.data;
              
                                 
              
              c.iD = res.data.goal.iD;
              c.comments = [];
               c.pageNum = 1;
               c.max = 0;
                c.getData(c.iD, c.pageNum, c);
              
              plus.webview.postMessageToUniNView({
                  name: res.data.goal.postUsername,
                  picture: res.data.goal.postHeadPortrait,
                  detail: 0
              }, "goal");
              
            })
            
            
            
            this.pageNum = 1;
            this.comments = [];
   
            uni.$on('back', (data) => {
                console.log(data)
               uni.navigateBack();

            })
        },
        
        // 上拉加载数据
        onReachBottom() {
            console.log("onReachBottom");
            if (this.max > this.data.goal.commentNum) {
                this.loadMoreText = "没有更多数据了!"
                return;
            }
            this.showLoadMore = true;
            setTimeout(() => {
                this.setDate();
            }, 300);
        }
    }
</script>

<style>
    page{
        background-color:#f7f6fc;
    }
    .port {
        width: 750rpx;
        margin-top: 30upx;
        background-color: #fefefe;
    }

    .text {
        margin-left: 30upx;
        margin-right: 30upx;
        width: 690upx;
        color: #333333;
        font-weight: 800;
        font-size: 40upx;
        margin-top: 20upx;
    }

    .texts {
       margin-left: 30upx;
       margin-right: 30upx;
       width: 690upx;
        color: #333333;
        font-size: 35upx;
    }

    .image {
        padding-left: 30upx;
        padding-right: 30upx;
        width: 750upx;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .bottom {

        margin-top: 30upx;
        height: 130upx;
        display: flex;
        flex-direction: row;
    }

    .left {
        margin-left: 30upx;
        display: flex;
        flex-direction: column;
        color: #999999;
        width: 500upx;
    }

    .button {
        height: 70upx;
        font-size: 30upx;
        border-radius: 10upx;
        background-color: #FFB400;
    }

    .sum {
        color: #666666;
        font-size: 35upx;
        margin-left: 30upx;
    }

    .title {
        margin-top: 20upx;
    }

    .content {
        padding-top: 20upx;
        padding-left: 30upx;
        width: 750upx;
    }

    .contents {
        display: flex;
        flex-direction: row;
        padding-bottom: 30upx;
    }

    .images {
        display: flex;
        flex-direction: column;

    }

    .dianzanshu {
        color: #333333;
        font-size: 30upx;
        margin-left: 10upx;
        margin-top: -5upx;
    }

    .aixin {
        width: 45upx;
        height: 45upx;

    }

    .zhuti {
        display: flex;
        flex-direction: column;
        width: 550upx;
        margin-bottom: 20upx;
    }

    .title2 {
        display: flex;
        flex-direction: row;
        margin-top: 10upx;
        margin-left: 20upx;
    }

    .yincang {
        margin-left: 100upx;
        color: #358dbd;
        font-size: 30upx;
    }

    .dibu {
        background-color: #FEFEFE;
        display: flex;
        flex-direction: row;
        width: 750upx;
    }

    .mui-bar {
        position: fixed;
        z-index: 10;
        right: 0;
        left: 0;

        height: 100upx;
        padding-right: 10px;
        padding-left: 10px;

        border-bottom: 0;
        -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
        box-shadow: 0 0 1px rgba(0, 0, 0, .85);

        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .mui-bar-tab {
        bottom: 0;

        width: 100%;
        height: 50px;
        padding: 0;

        border-top: 0;
        border-bottom: 0;

        -webkit-touch-callout: none;
    }

    .logos {
        margin-left: 30upx;
        color: #666666;
        font-size: 30upx;
    }

    .dianzanlo {

        font-size: 30upx;
        margin-left: 10upx;
        margin-top: -5upx;
        color: #0081FF;
    }

    .content:active {
        background-color: #DBDBDB;
    }
</style>
